<!--页面 -->
<template>
	<div class="contact marginAuto">
		<toplogo></toplogo>
		<home v-show="formdata.tabbar == 1"></home>
		<my v-if="formdata.tabbar == 2"></my>
		<div class="contact">
			<div class="footerblock">
				<div class="footereach" @click="gotag(1)">
					<div class="footereach-img">
						<img v-if="formdata.tabbar == 1" src="@/assets/newimage/homeactive.png" alt="" />
						<img v-if="formdata.tabbar == 2" src="@/assets/newimage/home.png" alt="" />
					</div>
					<div class="footereach-title" :class="formdata.tabbar == 1 ? 'active':''">Home</div>
				</div>
				<div class="footereach" @click="gotag(2)">
					<div class="footereach-img">
						<img v-if="formdata.tabbar == 1" src="@/assets/newimage/my.png" alt="" />
						<img v-if="formdata.tabbar == 2" src="@/assets/newimage/myactive.png" alt="" />
					</div>
					<div class="footereach-title" :class="formdata.tabbar == 2 ? 'active':''">Center</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import toplogo from '@/compontents/toplogo.vue'
	import home from './home/home.vue'
	import my from './my/my.vue'
	const router = useRouter();
	const formdata = reactive({
		tabbar:1
	});
	const gotag = (type) => {
		if(type == 2){
			let token = Boolean(localStorage.getItem('token'));
			if(!token){
				router.push('/login/login')
				return false
			};
		}
		formdata.tabbar = type;
	};
</script>

<style lang="less">
	.footerblock{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 85px;
		background-color: #fff;
		padding: 15px 0;
		display: flex;
		justify-content: space-around;
		.footereach{
			width:100px;
			text-align: center;
			cursor: pointer;
			.footereach-img{
				width: 25px;
				height: 25px;
				margin:auto;
				img{
					height: 25px;
				}
			}
			.footereach-title{
				color: #999999;
				font-size:16px;
				line-height: 22px;
				text-align:center;
				margin-top: 5px;
			}
			.active{
				color:#2F75FF;
			}
		}
	}
</style>